<!--Copyright 2010 John L. Reilly

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

     http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License. -->

<%@ page import="java.util.List"%>
<%@ page import="com.riq.entity.Department"%>
<%@ page import="com.riq.entity.Member"%>
<%@ page import="com.riq.entity.Location"%>
<%@ page import="com.riq.entity.Status"%>
<%@ page import="com.riq.entity.Icon"%>
<%@ page import="java.util.logging.Logger"%>
<%@ page import="java.io.IOException"%>

<%

  Long timeStamp = System.currentTimeMillis();
  Department d = (Department) request.getAttribute("d");
  List<Member> members = (List<Member>) request.getAttribute("members");
  List<Location> locations = (List<Location>) request.getAttribute("locations");
  List<Status> statuses = (List<Status>) request.getAttribute("statuses");
  List<Icon> icons = (List<Icon>) request.getAttribute("icons");

%>


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
<head>
<title>FirstResponder</title>

<!--Load the AJAX API-->
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">

  // Load the Visualization API and the piechart package.
  google.load('visualization', '1', {'packages':['barchart']});
  
  // Set a callback to run when the Google Visualization API is loaded.
  google.setOnLoadCallback(drawChart);
  
  // Callback that creates and populates a data table, 
  // instantiates the pie chart, passes in the data and
  // draws it.
  function drawChart() {

  // Create our data table.
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Task');
    data.addColumn('number', 'Alerts');
    data.addRows([
      ['False Alarm', 11],
      ['CO', 2],
      ['Fire', 2],
      ['Training', 2],
      ['Other', 7]
    ]);

    // Instantiate and draw our chart, passing in some options.
    var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
    chart.draw(data, {width: 300, height: 240, is3D: false, legend: 'bottom'}
    colors, {red, green});
  }
</script>


<script type="text/javascript">

function detectScrollbar()
{
  if (navigator.appName == "Microsoft Internet Explorer")
  {
    window.name=document.body.scrollTop;
  }
  else
  {
    window.name=window.pageYOffset;
  }
}

function doScroll()
{
   if (window.name) window.scrollTo(0, window.name);
}

// toggles the div, switches the header text, saves state in cookie
function toggle2(showHideDiv, switchTextDiv) {
  var ele = document.getElementById(showHideDiv);
  var text = document.getElementById(switchTextDiv);
  if(ele.style.display == "block") {
        ele.style.display = "none";
    text.innerHTML = "show";
    setCookie(showHideDiv, 'closed', 7);
    }
  else {
    ele.style.display = "block";
    text.innerHTML = "hide";
    setCookie(showHideDiv, 'open', 7);

  }
}

// same as toogle2 except takes array (intended to toggle all divs)
function toggle3(contentDiv, controlDiv) {
        if (contentDiv.constructor == Array) {
                for(i=0; i < contentDiv.length; i++) {
                     toggle2(contentDiv[i], controlDiv[i]);
                }
        }
        else {
               toggle2(contentDiv, controlDiv);
        }
}


function getCookie(c_name)
{
if (document.cookie.length>0)
  {
  c_start=document.cookie.indexOf(c_name + "=");
  if (c_start!=-1)
    {
    c_start=c_start + c_name.length+1;
    c_end=document.cookie.indexOf(";",c_start);
    if (c_end==-1) c_end=document.cookie.length;
    return unescape(document.cookie.substring(c_start,c_end));
    }
  }
return "";
}


function setCookie(c_name,value,expiredays)
{
var exdate=new Date();
exdate.setDate(exdate.getDate()+expiredays);
document.cookie=c_name+ "=" +escape(value)+
((expiredays==null) ? "" : ";expires="+exdate.toUTCString());
}

</script>

<!--META-->
<meta http-equiv="content-type"  content="text/html; charset=utf-8"/>
<meta name="viewport" content="width=device-width" />

<!--STYLESHEET-->
<link rel="stylesheet" type="text/css" href="stylesheets/static.css" />

</head>
<body>

<% 
Cookie[] cookie = request.getCookies(); 
System.out.println("Cookies matching: " + cookie.length);
System.out.println("Inside deptDisplay.jsp");
%>

<!--FIXED HEADERS-->

<div class="headwrap">
<div class="hBlack">
<div class="headerLeftTop">FirstResponder</div>
<div class="headerRightTop">ver 0.9</div>
<div class="headerLeftBottom">Department: Display</div>
<div class="headerRightBottom">12:34 PM</div>
</div>
<div class="hGray">
  <a class="buttonGrayHdr" href="mainMenu.html">Main</a>
  <a class="buttonGrayHdr" href="commandMenu.html">Command</a>
  <a class="buttonGrayHdr gSelected" href="department?action=display">Admin</a>
</div>
<div class="headerMist"></div>
</div>

<div class="outwrap">
<div class="headerPlug"></div>

<!--BUTTONS-->

	<div id="centeredButtons"><ul><li>
	  <a class="button green narrow tall" 
	     href="memberCreate.jsp">
	     New<p>Member</p></a></li><li>  
	  <a class="button green narrow tall" 
	     href="location?action=prepCreate&deptId=<%=d.getid().toString().trim()%>">
	     New<p>Location</p></a></li></ul>
	</div>

	<div id="centeredButtons"><ul><li> 
	  <a class="button green narrow tall" 
	     onclick="javascript:window.location.href='/statusCreate.jsp'">
	     New<p>Status</p></a></li><li>   
	  <a class="button green narrow tall" 
	     href="marker?action=prepCreate">
	     New<p>Marker</p></a></li></ul>
	</div>
   
	<div id="centeredButtons"><ul><li>   
	  <a class="button green narrow tall last" 
	     href="iconCreate.jsp?deptId=<%=d.getid().toString().trim()%>">
	     New<p>Icon</p></a></li><li>   
	  <a class="button blue narrow tall last" href="metrics?action=lastReading">
	     Metrics</a></li></ul>
	</div>

  <div class="sub black">Department</div>
  <div id="centeredButtons"><ul><li>
  <a class="button blue wide tall" 
   href="department?action=edit&deptId=<%=d.getid().toString()%>"><%=d.getlongName()%></a>
  </li></ul></div>
  
  <div class="sub black" style="width: 80%">Members</div> 
  <a class="sub blue buttonright" id="hdrMembers<%=d.getid()%>" style="clear:none; 
     border: 0px solid black; text-align: right; width: 20%; color: white; text-align: right" 
     href="javascript:toggle2('conMembers<%=d.getid()%>', 'hdrMembers<%=d.getid()%>');" >hide</a>

  <div id="conMembers<%=d.getid()%>" style="display: block;">  

	<% if (members.isEmpty()) { %>
	      <div class="row" style="color: red">No Members Found</div>
	<% } else {
	   String tempMember = "temp";
	   for (Member m : members) {
	     
	     if (!tempMember.equalsIgnoreCase(m.gettype())) { %>
	       <div class="sub white"><%=m.gettype()%></div><% } %>
	       
	       <div id="centeredButtons"><ul><li>
	       <a class="button blue wide short" 
	          href="member?action=display&deptId=<%=m.getdeptId()%>&memberId=<%=m.getid()%>">
	       <%=m.getlastName()%>, <%=m.getfirstName()%></a>
	       </li></ul></div><%
	       
	     if (!m.gettype().isEmpty()) {
	       tempMember = m.gettype().toString();
	     }
	   }
	 }
	%>
	</div> 
	<%
   // this section for hiding and showing Department details
    for (int h=0; h < cookie.length; h++) {
      if (("conMembers" + d.getid()).equalsIgnoreCase(cookie[h].getName())) {
        if ("closed".equals(cookie[h].getValue())) {
          // set div style to invisible and text to "show"
          %>
          <script type="text/javascript" language="JavaScript">
          toggle2('conMembers<%=d.getid()%>', 'hdrMembers<%=d.getid()%>');
          </script>
          <%
        }
      }
    } 
 %>

 <div class="sub black" style="width: 80%">Locations</div> 
   <a class="sub blue buttonright" id="hdrLocations<%=d.getid()%>" style="clear:none; 
      border: 0px solid black; text-align: right; width: 20%; color: white; text-align: right" 
      href="javascript:toggle2('conLocations<%=d.getid()%>', 'hdrLocations<%=d.getid()%>');" >hide</a>

 <div id="conLocations<%=d.getid()%>" style="display: block;">  
  <div class="row" style="background-color: gold; color: black">
     NOTE: Locations will display on the Accountability page in the same order 
     that they appear below. Click the "Seq" button next to a Location to change the 
     Location's Sequence number (shown on the button) thus changing its position in the 
     sort order for the Accountability page. 
 </div>
 
 <% if (locations.isEmpty()) { %>
 <div class="row" style="color: red">No Locations Found</div>
 <% } else {
	    String tempLocation = "temp";
	    for (Location l : locations) {
	      if (!tempLocation.equalsIgnoreCase(l.gettype())) { %>
	        <div class="sub white"><%=l.gettype()%></div> <% } %>
          <div class="row">
	        <a class="button blue short" style="width: 50%; clear: none" 
	           href="location?action=display&locationId=<%=l.getid()%>">
	           <%=l.getshortName()%></a>
          <a class="button blue short" style="width: 20%; clear: none" 
             href="location?action=edit&locationId=<%=l.getid()%>">
             Seq: <%=l.getsequence()%></a>
          </div>
	      <% if (!l.gettype().isEmpty()) {
	        tempLocation = l.gettype().toString();
	      }
	    }
	  }
 %>
 </div>
 <%
   // this section for hiding and showing Department details
    for (int h=0; h < cookie.length; h++) {
      if (("conLocations" + d.getid()).equalsIgnoreCase(cookie[h].getName())) {
        if ("closed".equals(cookie[h].getValue())) {
          // set div style to invisible and text to "show"
          %>
          <script type="text/javascript" language="JavaScript">
          toggle2('conLocations<%=d.getid()%>', 'hdrLocations<%=d.getid()%>');
          </script>
          <%
        }
      }
    } 
 %>

 <div class="sub black" style="width: 80%">Statuses</div> 
   <a class="sub blue buttonright" id="hdrStatuses<%=d.getid()%>" style="clear:none; 
      border: 0px solid black; text-align: right; width: 20%; color: white; text-align: right" 
      href="javascript:toggle2('conStatuses<%=d.getid()%>', 'hdrStatuses<%=d.getid()%>');" >hide</a>
     
 <div id="conStatuses<%=d.getid()%>" style="display: block;">  
 <% if (statuses.isEmpty()) { %>
 <div class="row" style="color: red">No Statuses Found</div>
 <% } else {
    String tempStatus = "temp";
    for (Status s : statuses) {
      
      if (!tempStatus.equalsIgnoreCase(s.gettype())) { %>
        <div class="sub white"><%=s.gettype()%></div> <% } %>
        
        <div id="centeredButtons"><ul><li>
           <a class="button blue wide short" 
              href="status?action=display&statusId=<%=s.getid()%>">
              <%=s.getshortName()%></a>
        </li></ul></div> 
                  
       <% if (!s.gettype().isEmpty()) {
            tempStatus = s.gettype().toString(); 
       }
     }
   } 
 %>
 </div>
  <%
   // this section for hiding and showing Department details
    for (int h=0; h < cookie.length; h++) {
      if (("conStatuses" + d.getid()).equalsIgnoreCase(cookie[h].getName())) {
        if ("closed".equals(cookie[h].getValue())) {
          // set div style to invisible and text to "show"
          %>
          <script type="text/javascript" language="JavaScript">
          toggle2('conStatuses<%=d.getid()%>', 'hdrStatuses<%=d.getid()%>');
          </script>
          <%
        }
      }
    } 
 %>
 

 <div class="sub black" style="width: 80%">Icons</div> 
   <a class="sub blue buttonright" id="hdrIcons<%=d.getid()%>" style="clear:none; 
      border: 0px solid black; text-align: right; width: 20%; color: white; text-align: right" 
      href="javascript:toggle2('conIcons<%=d.getid()%>', 'hdrIcons<%=d.getid()%>');" >hide</a>
     
 <div id="conIcons<%=d.getid()%>" style="display: block;">  
 <% if (icons.isEmpty()) { %>
 <div class="row" style="color: red">No Icons Found</div>
 <% } else {
    String tempIcon = "temp";
    for (Icon i : icons) {
      
      if (!tempIcon.equalsIgnoreCase(i.gettype())) { %>
        <div class="sub white"><%=i.gettype()%></div> <% } %>
        <div class="row">

          <a class="button blue notsonarrow short" style="clear: none; float: right"
          href="icon?action=display&iconId=<%=i.getid()%>">
          <%=i.getlongName()%></a>
          
          <div id="scale-up" style="height: 30px; margin: 20px; float: right; clear:left">
          <img src="http://chart.apis.google.com/chart?cht=d&chl=<%=i.getshortName()%>'h\<%=i.getpadL()%>'-<%=i.getpadB()%>'<%=i.getpadR()%>'-<%=i.getpadT()%>'dim'\box1'b\<%=i.getbcolor()%>'fC\<%=i.getfcolor()%>'tC">
          </div>
          
        </div>
        <% 
                
      if (!i.gettype().isEmpty()) {
          tempIcon = i.gettype().toString(); 
      }
    }
  }
 %>
 </div>
  <%
   // this section for hiding and showing Department details
    for (int h=0; h < cookie.length; h++) {
      if (("conIcons" + d.getid()).equalsIgnoreCase(cookie[h].getName())) {
        if ("closed".equals(cookie[h].getValue())) {
          // set div style to invisible and text to "show"
          %>
          <script type="text/javascript" language="JavaScript">
          toggle2('conIcons<%=d.getid()%>', 'hdrIcons<%=d.getid()%>');
          </script>
          <%
        }
      }
    } 
 %>

<!--FOOTER-->
<div class="footer">jreilly <%=d.getid() %></div>

<!--OUTLINE WRAPPER -->
</div> 

</body>
</html>